<template>
  <div id="ompn" style="width: 100%;height:500px;"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as echarts from "echarts";
type EChartsOption = echarts.EChartsOption;
onMounted(() => {
  let chartDom = document.getElementById("ompn")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  const data: number[][] = [];

  for (let i = 0; i <= 100; i++) {
    let theta = (i / 100) * 360;
    let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
    data.push([r, theta]);
  }

  option = {
    title: {
      text: "图一"
    },
    legend: {
      data: ["line"]
    },
    polar: {},
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    angleAxis: {
      type: "value",
      startAngle: 0
    },
    radiusAxis: {},
    series: [
      {
        coordinateSystem: "polar",
        name: "line",
        type: "line",
        data: data
      }
    ]
  };

  option && myChart.setOption(option);
});
</script>
<style>
</style>
